<template>
  <el-container class="b_container">
    <el-header class="main">
      <el-button type="warning" size="mini" round>阿巴</el-button>
      <el-button type="warning" size="mini" round>狗叫</el-button>
      <el-button type="warning" size="mini" round>大雨</el-button>
      <el-button @click="dialogVisible = true" style="margin-left: 800px" type="warning" size="mini">登陆/注册</el-button>
      <el-dialog
          title=""
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
      >
        <el-button type="text" @click="dialogVisible1 = true ; dialogVisible=false">点击注册</el-button>
        <el-dialog
            :append-to-body="true"
            title=""
            :visible.sync="dialogVisible1"
            width="30%"
            :before-close="handleClose">

          <el-form label-position="left" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="0"
                   class="demo-ruleForm">
            <el-form-item label="" prop="name">
            <el-input class="input1" placeholder="输入称昵" type="text" v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="" prop="email">
              <el-input class="input2" placeholder="输入邮箱" type="text" v-model="ruleForm.email"></el-input>&nbsp;&nbsp;
               <el-button  type="primary"  @click="send" :disabled="min!=60"  >{{min==60?'&nbsp;发送邮件':"剩余"+min}}</el-button>
            </el-form-item>
              <el-form-item label="" prop="confirmCode">
              <el-input class="input1" placeholder="输入验证码"  type="text" v-model="ruleForm.confirmCode" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="" prop="password">
              <el-input class="input1" placeholder="输入密码"  type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="" prop="repassword">
              <el-input class="input1" placeholder="确认密码" type="password" v-model="ruleForm.repassword" autocomplete="off"></el-input>
            </el-form-item>
            <div class="button">
              <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
                   
            </div>
          </el-form>
        </el-dialog>


        <el-form  :model="loginForm" status-icon ref="loginForm" label-width="0"
                 class="demo-ruleForm">
          
          <el-form-item  prop="email">
            <el-input class="input" placeholder="输入邮箱" type="text" v-model="loginForm.email"></el-input>
          </el-form-item>
          <el-form-item  prop="password">
            <el-input class="input" placeholder="输入密码" type="password" v-model="loginForm.password" autocomplete="off"></el-input>
          </el-form-item>
    
            <div class="button">
                    <el-button type="primary" @click="login('loginForm')">登陆</el-button>
                    <el-button @click="resetForm('loginForm')">重置</el-button>          
            </div>
          
        </el-form>
        <span slot="footer" class="dialog-footer">

  </span>
      </el-dialog>
    </el-header>


    <el-main class="main">
      <p class="product-desc">为每个想知道八卦的人提供一个少走弯路的平台</p>
      <p class="product-desc_C">我们缺乏的不是知识，而是学而不厌的态度</p>
    </el-main>
    <el-footer class="main">
      <a href="">关于我们</a> | <a href="">加入我们</a> | <a href="">联系我们</a> | <a href="">获取帮助</a>
      <br>
      <span> Copyright @ B321</span> <a href="">粤ICP备 - 20200423号 </a>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  data() {
    var checkname = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('昵称不能为空'));
      }
      setTimeout(() => {
        callback();
      }, 1000);

    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码1'));
      } else {
        if (this.ruleForm.repassword !== '') {
          this.$refs.ruleForm.validateField('repassword');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码2'));
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();

      }
    };
    return {
      src: "http://localhost:9999/review",
      dialogVisible: false,
      dialogVisible1: false,
      min:60,
      test:'',
      test1:'',
      ruleForm: {
        email:'',
        name: '',
        password: '',
        repassword: '',
        confirmCode:''
      },
      loginForm:{
        code:'',
        name:'',
        password:'',
        email: '',
        
      },
      rules: {
        password: [
          {validator: validatePass, trigger: 'blur'}
        ],
        repassword: [
          {validator: validatePass2, trigger: 'blur'}
        ],
        name: [
          {validator: checkname, trigger: 'blur'}
        ]
      }

    };
  },
  methods: {
    send(){
    this.test= setInterval(() => {
      this.min--;
        if(this.min<=0){
          clearInterval(this.test)
          this.min=60
        }
    }, 1000);
    const data={
      "email":this.ruleForm.email
    }
    console.log(data);
    axios.post("http://localhost:9999/winter/admin/sendMail",data).then(resp=>{
      if(resp.data.code===0){
           this.$message({
           message: resp.data.message,
           type: 'success'
          });
      }
       else{
              this.$message.error(resp.data.message);
              this.test1=setTimeout((
              )=>{    this.min=60
              clearInterval(this.test)
              },1000*0.5)
         
        }
          
    })


    },
    huan() {
      this.src = "http://localhost:9999/review?t=" + Math.random();
    },
    login(){
      const data1 ={
        "password":this.loginForm.password,
        "email": this.loginForm.email
      }
      console.log(data1);
      axios.post("http://localhost:9999/winter/admin/login",data1).then((resp)=>{
        if(resp.data.code===0){
               this.$message({
           message: resp.data.message,
           type: 'success'
         });
         this.$router.push({path:'/editor'})
        }
        else{
              this.$message.error(resp.data.message);
        }
      })
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },

    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        console.log(valid);
        if (valid != true) {
          return;
        }
        const data = {
          name: this.ruleForm.name,
          password: this.ruleForm.password,
          email: this.ruleForm.email,
          confirmCode: this.ruleForm.confirmCode

        }

        console.log(data);
        axios.post('http://localhost:9999/winter/admin/insert1', data)
            .then((res) => {
              if (res.data.code === 0) {
                this.$message({
                  message: res.data.message,
                  type: 'success'
                });
                // dialogVisible1 = true ; dialogVisible=false
                this.dialogVisible1=false;
                this.dialogVisible=true;
                // this.$router.push({path: '/editor'});
                console.log(data);
              } else {
                this.$message.error(res.data.message);
              }
            }).catch((err) => {
          console.log(err);
          // console.log(data);
        })
      })
    }
    ,

    resetForm() {
      // this.ruleForm.resetFields();
      this.$refs["ruleForm"].resetFields();
      // this.ruleForm.name='';
      // this.ruleForm.password='';
      // this.ruleForm.repassword='';
    }
  }
};
</script>


<style scoped>
.b_container {
  background-image: url("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2215631652,1626040583&fm=26&gp=0.jpg");
  
}

.product-desc {
  font-family: '楷体';
  font: 20px Extra large;
  line-height: 50px;
}

.product-desc_C {
  font: 14px Base;

}
.main{
  padding-top: 10px; 
}
.input{
margin-left: 0px;
width: 65%;
}
.button{
     display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.input1{
margin-left: 60px;
width: 65%;
}
.input2{
margin-left: 60px;
width: 40%;
}
</style>
